<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="dv1"></div>
		<div id="dv2">
			<button id="bt1">ok2</button>
		</div>
		
		<div id="dv3">
			<button id="bt3">ok3</button>
		</div>
		
		<button id="bt4">ok4</button>
		
		<div id="dv5"> dv5</div>
	</body>
	<script>
	// 添加节点
	// （1）由document创建指定的标记节点
	var ipt=document.createElement("input");
	// （2）根据需要为节点属性赋值
	ipt.type="text"	
	// （3）定位新节点所处位置的父节点
	var dv1=document.getElementById("dv1");
	// （4）由父节点添加新节点
	dv1.appendChild(ipt)
		
	// 向元素内部添加文本操作	
	var bt=document.createElement("button");
	// 调用innerHTML属性向元素内部添加文本
	bt.innerHTML="ok"
	dv1.appendChild(bt)
	
	
	// 删除节点思路：
// （1）由document锁定要删除的节点
var bt1=document.getElementById("bt1");
// （2）定位此节点的父节点
var dv2=document.getElementById("dv2");
// （3）由父节点调用方法删除节点
dv2.removeChild(bt1);

// 更新节点思路：
// （1）由document锁定要改变的节点
var bt3=document.getElementById("bt3");
// （2）由document创建新节点（要去掉原有节点的新节点）
var ip3=document.createElement("input");
// （3）定位此节点的父节点
var ipf=bt3.parentNode;
// （4）由父节点调用方法用新节点取代旧节点
ipf.replaceChild(ip3,bt3)

// innerHTML与outerHTML属性讲解
var bt4=document.getElementById("bt4");
// 可以获取bt4的文本值
console.log(bt4.innerHTML)
// innerHTML改变元素内部的值
bt4.innerHTML="ok4新";
// outerHTML改变元素本身
console.log(bt4.outerHTML)
bt4.outerHTML="<input type='text' />"

// 补充 对于innerHTML属性，在输出时，若符合html语法回形成视图，不符合语法回原文输出
document.getElementById("dv5").innerHTML="<button>ok555</button>"


	

	</script>
</html>
